/******************** 变量 ********************/
$text-color-hover-stroke: #1359bf;
$text-color-disabled-fill: $text-color-disabled;
$text-color-default-stroke: $text-color;
$text-color-active-fill: #ffffff;
$color-white: #ffffff;

$background-color-default-fill: $primary-color;
$background-color-hover-selection: #f0f3fa;
$background-color-input: $input-background;
$background-color-default-stroke: $input-background;
$background-color-disabled-input: $disabled-background;

$border-color-input: $primary-color;
$border-color-default-input: $border-color-base;
$border-color-hover-input: $border-color-hover;
$border-color-disabled-input: $border-color-disabled;
$time-picker-panel-selection-default-width: 0.64rem;
$time-picker-panel-selection-large-width: 0.96rem;

$time-color-state: (default, $border-color-default-input, $background-color-input, $text-color),
  (hover, $border-color-hover-input, $background-color-input, $text-color),
  (focus, $border-color-input, $background-color-input, $text-color),
  (active, $border-color-input, $background-color-input, $text-color),
  (disabled, $border-color-disabled-input, $background-color-disabled-input, $text-color-disabled) !default;

$item-color-state: (default, $background-color-default-stroke, $text-color-default-stroke),
  (hover, $background-color-hover-selection, $text-color-hover-stroke),
  (active, $background-color-default-fill, $text-color-active-fill),
  (disabled, $background-color-default-stroke, $text-color-disabled-fill) !default;

/******************** mixin ********************/

@mixin itemState($selector, $states) {
  #{ $selector } {
    background: nth(nth($states, 1), 2);
    color: nth(nth($states, 1), 3);
    &:hover {
      color: nth(nth($states, 2), 3);
    }
    &.active,
    &.selected {
      background: nth(nth($states, 3), 2);
      color: nth(nth($states, 3), 3);
    }
    &:disabled,
    &[disabled] {
      background: nth(nth($states, 4), 2);
      color: nth(nth($states, 4), 3);
      cursor: not-allowed;
    }
  }
}

/******************** 组件 ********************/
@include colorState('.lv-time-picker-wrapper', $time-color-state);
@include itemState('.lv-time-picker-panel-selection li', $item-color-state);

.lv-time-picker {
  display: inline-block;
  width: 1.76rem;
  font-size: $font-size-base;
  line-height: $line-height-base;
  font-family: $font-family;
  color: $text-color;

  @include input-help-tooltip($margin-xl);

  &.lv-time-picker-size-large {
    .lv-time-picker-wrapper {
      height: $height-lg;

      .lv-time-picker-clear {
        height: $height-base;
      }

      .lv-input {
        height: $height-lg;
      }
    }
  }
}

.lv-time-picker-wrapper {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  height: $height-base;
  border-width: $border-width-base;
  border-style: $border-style-base;
  border-radius: $border-radius-md;

  .lv-time-picker-clear {
    display: none;
    align-items: center;
    justify-content: center;
    height: $height-sm;
    width: 0.24rem;
    background: $component-background;
    position: absolute;
    top: 0.03rem;
    right: 0.03rem;
    z-index: 1;
  }
  .lv-time-picker-main {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: stretch;

    .lv-input {
      width: 100%;
      border: none;
      background: none;
      padding: 0 $padding-xs 0 $padding-sm;
      height: 0.3rem;
      &[readonly] {
        cursor: default;
      }
    }
  }

  .lv-time-picker-operation {
    display: flex;
    justify-content: center;
    width: 0.32rem;
    position: relative;

    .lv-icon {
      color: $icon-color;
    }
  }

  &:hover {
    .lv-time-picker-clear {
      display: flex;
    }
  }

  &.disabled {
    background: nth(nth($select-color-state, 5), 3);
    border-color: transparent;
    color: nth(nth($select-color-state, 5), 4);
    cursor: not-allowed;
  }

  &.active {
    border-color: $border-color-input;
  }
}

// panel
.lv-time-picker-panel {
  width: 100%;
  margin: $margin-xs 0;
}

.lv-time-picker-panel-container {
  display: flex;
  flex-direction: column;
  background: $component-background;
  box-shadow: $shadow-xs;
  border-radius: $border-radius-md;
  overflow: hidden;

  > .lv-time-picker-panel-operation {
    height: $height-xl;
    border-top: $border-width-base $border-style-base $separate-line-color;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 $padding-lg;
  }
}
.lv-time-picker-panel-combobox {
  display: flex;

  .lv-time-picker-panel-selection:not(:last-child) {
    border-right: $border-width-base $border-style-base $separate-line-color;
  }
}
.lv-time-picker-panel-selection {
  width: $time-picker-panel-selection-default-width;
  max-height: 2.23rem;
  overflow: hidden;

  &.lv-time-picker-panel-selection-large {
    width: $time-picker-panel-selection-large-width;

    li {
      width: $time-picker-panel-selection-large-width;
    }
  }

  &::after {
    content: '';
    display: block;
    height: 1.75rem;
  }

  &:hover {
    overflow: auto;
    overflow: overlay;
    overflow-x: hidden;

    @include component-scroll;
  }

  li {
    width: $time-picker-panel-selection-default-width;
    padding: 0.02rem 0;
    text-align: center;
    cursor: pointer;

    &[disabled] {
      &.selected {
        background-color: $border-color-disabled;
        color: $color-white;
      }
    }
  }
}

// form 校验处理
.lv-time-picker.ng-invalid.ng-dirty {
  .lv-time-picker-wrapper {
    border-color: $error-color;
  }
}
